import React from 'react';
import { Form, Breadcrumb, Row, Col, Input, DatePicker, Select, Modal, Button, Pagination, Icon, Cascader, Table, message } from 'antd';
import { Link } from 'react-router';
import $ from 'jquery';
import Config from '../../../common/config';
import './setOrder.less';
import region from '../../../common/region';

const FormItem = Form.Item;
const Option = Select.Option;
const config = new Config();
const InputGroup = Input.Group;
const token = sessionStorage.getItem('token');

const NewAddressForm = Form.create()(
  (props) => {
    const { onSubmit, form, region, visible, handleCancel } = props;
    const { getFieldDecorator } = form;
    const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 16 } };
    const tailFormItemLayout = { wrapperCol: { span: 16, offset: 6, } };
    return (
      <Modal
        visible={visible}
        title='新增收货地址 打红色*为必填项'
        onCancel={handleCancel}
        footer={null}
        maskClosable={false}
      >
        <Form className='model-y-t' onSubmit={onSubmit}>
          <FormItem {...formItemLayout} label='所在地区' hasFeedback>
            {getFieldDecorator('area', {
              rules: [{ required: true, type: 'array', message: '请选择收货地址所在的地区!' }],
            })(
              <Cascader options={region} placeholder='请选择省市区' />
              )}
          </FormItem>
          <FormItem {...formItemLayout} label='详细地址' hasFeedback>
            {getFieldDecorator('detail', {
              rules: [{
                required: true, min: 3, max: 200, message: '请填写您的详细地址，长度在3到200个字符之间',
              }],
            })(
              <Input type='textarea' rows={4} placeholder='建议您如实填写详细收货地址，例如街道名称，门牌号码，楼层和房间号等信息' style={{ resize: 'none' }} />
              )}
          </FormItem>
          <FormItem {...formItemLayout} label='收货人姓名' hasFeedback>
            {getFieldDecorator('name', {
              rules: [{
                required: true, max: 25, message: '请填写正确的收货人姓名',
              }]
            })(
              <Input placeholder='长度不超过25个字符' />
              )}
          </FormItem>
          <FormItem {...formItemLayout} label='联系方式' hasFeedback>
            {getFieldDecorator('phone', {
              rules: [{
                required: true, pattern: /^(1[34578]\d{9})$/, message: '请填写正确的手机号码',
              }]
            })(
              <Input placeholder='请填写您的手机号码' />
              )}
          </FormItem>
          <FormItem className={'zhifu-btn'}>
            <Button type='primary' style={{ marginLeft: 120, width: 100 }} htmlType='submit'>保存</Button>
          </FormItem>
        </Form>
      </Modal>
    );
  }
);

class SetOrder extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      manager: JSON.parse(sessionStorage.getItem('UserInfo')), // 管理人
      userId: '', // 用户ID
      user: {}, // 用户信息
      userVisible: false, // 用户模态框
      userPage: 1, // 用户的当前页
      userPageSize: 10, // 用户的每页显示的条数
      userTotal: 0, // 用户的总数 
      userSizeOptions: ['10', '20', '30', '40'], // 用户的条数选择
      userInfo: '', // 客户姓名或账号
      customerSource: [], // 客户渠道
      currentCustomerSource: undefined, // 当前选中的客户渠道
      userList: [], // 用户列表
      address: {}, // 收货地址
      visible: false, // 新增收货地址
      switchingaddress: false, // 切换地址弹出框
      addressList: [], // 收货地址列表
      selectAddress: '', // 选中的收货地址
      shipping: [], // 物流公司
      assigning: false, //添加商品弹出框
      productList: [], // 商品列表
      productName: '', // 商品名称
      productPage: 1, // 商品的当前页
      productPageSize: 10, // 商品的每页显示的条数
      productTotal: 0, // 商品的总数
      currentProductList: [], // 当前选中的商品列表
      deleteProduct: {}, // 将要删除的商品
      categoryList: [], // 分类列表
      currentCategoryId: '', // 当前分类ID
      visible1: false, //删除弹出框
      addressError: '', // 地址错误信息
      collectionMoney: '', // 代收金额
      payType: [], // 支付类型
      expectedKuaidi100Code: undefined, // 快递方式编码
      departmentList: [], // 部门列表
      staffList: [], // 员工列表
      currentStaff: undefined, // 当前选中的人员
      currentDepartment: undefined, // 当前选中的部门
    }
  }

  componentDidMount() {
    const { userId } = this.props.params;
    //省市区
    this.handleRegion();
    if (userId) {
      this.state.userId = userId;
      this.getUser();
      this.getAddressList();
    }
    this.getShipping();
    this.getPayType();
  }

  // 获取用户详情
  getUser() {
    $.ajax({
      url: `${config.CrmMember}/crm_user/OrderInUser`,
      type: 'post',
      headers: {
        'Authorization': 'Bearer ' + token,
      },
      data: {
        id: this.state.manager.id,
        userid: this.state.userId
      },
      success: res => {
        console.log('获取用户详情', res);
        if (res.code === 200) {
          const user = res.data[0];
          let address = {};
          let addressError = this.state.addressError;
          if (user.addressArea) {
            address = {
              area: user.addressArea,
              detail: user.addressDetail,
              name: user.addressName,
              phone: user.addressPhone
            }
            addressError = '';
          }
          this.setState({
            user,
            address,
            addressError
          });
          this.props.form.setFieldsValue({
            userName: user.realname
          });
        }
      }
    });
  }

  // 显示性别
  showSex(sex) {
    let text;
    switch (sex) {
      case '0':
        text = '女';
        break;
      case '1':
        text = '男';
        break;
      case '2':
        text = '保密';
        break;
    }
    return text;
  }

  // 显示客户状态
  showUserStatus(status) {
    let text;
    switch (status) {
      case 1:
        text = '成交';
        break;
      case 2:
        text = '意向客户';
        break;
    }
    return text;
  }

  // 显示用户模态框
  showUser() {
    this.setState({
      userVisible: true
    });
    this.getCustomerSource();
    this.getUserList();
    this.getDepartment();
  }

  // 隐藏用户模态框
  hiddenUser() {
    this.setState({
      userVisible: false
    });
  }


  // 选择用户的页数
  changeUserPage(page) {
    this.setState({
      userPage: page
    },()=>this.getUserList());
  }

  // 选择用户的每页显示的条数
  changeUserSize(page, pageSize) {
    this.setState({
      userPage: page,
      userPageSize: pageSize
    },()=>this.getUserList());
  }

  // 获取客户渠道
  getCustomerSource() {
    $.ajax({
      url: `${config.CrmSettings}/crm_customersource/BindSource`,
      type: 'post',
      headers: {
        'Authorization': 'Bearer ' + token,
      },
      success: res => {
        console.log('获取客户渠道', res);
        if (res.code === 200) {
          this.setState({
            customerSource: res.data
          });
        }
      }
    });
  }

  // 选择客户渠道
  changeCustomerSource(value) {
    this.setState({
      currentCustomerSource: value
    });
  }

  // 输入客户姓名或账号
  inputUserInfo(e) {
    this.setState({
      userInfo: e.target.value
    });
  }

  // 搜索客户
  searchUser() {
    this.setState({
      page: 1
    }, () => {
      this.getUserList();
    });
  }

  // 获取客户列表
  getUserList() {
    const { userPage: pageindex, userPageSize: pagesize, userInfo: Inkey, currentCustomerSource: customersourceid, currentDepartment, currentStaff } = this.state;
    $.ajax({
      url: `${config.CrmMember}/crm_user/OrderInUser`,
      type: 'post',
      headers: {
        'Authorization': 'Bearer ' + token,
      },
      data: {
        id: this.state.manager.userid,
        pageindex,
        pagesize,
        Inkey,
        customersourceid,
        departmentid: currentDepartment,
        manageuserid: currentStaff
      },
      success: res => {
        console.log('获取客户列表', res);
        if (res.code === 200) {
          this.setState({
            userList: res.data,
            userTotal: res.datacount
          });
        }
      }
    });
  }

  // 选择客户
  selectUser(user) {
    let address = {};
    let addressError = this.state.addressError;
    if (user.addressArea) {
      address = {
        area: user.addressArea,
        detail: user.addressDetail,
        name: user.addressName,
        phone: user.addressPhone
      }
      addressError = '';
    }
    this.setState({
      userId: user.id,
      phone: user.phone,
      userVisible: false,
      user,
      address,
      addressError
    }, () => this.getAddressList());
    this.props.form.setFieldsValue({
      userName: user.realname
    });
  }

  // 显示新增收货地址模态框
  showModal() {
    if (!this.state.userId) {
      return message.warning('请先选择用户');
    }
    if (this.state.addressList.length > 9) {
      return message.warning('您已经添加了10条地址，不能再添加新地址');
    }
    this.setState({
      visible: true,
    });
  }

  //处理省市区数据
  handleRegion() {
    const setOptions = arr => {
      arr.map((item, key) => {
        item.value = item.name;
        item.label = item.name;
        if (item.child) {
          item.children = item.child;
          setOptions(item.children);
        }
      });
    }
    setOptions(region);
    this.setState({
      region
    });
  }

  // 保存form
  saveFormRef(form) {
    this.form = form;
  }

  //提交新增地址表单
  submitNewAddress(e) {
    e.preventDefault();
    const form = this.form;
    form.validateFields((err, values) => {
      if (!err) {
        $.ajax({
          url: `${config.CrmMember}/crm_user/AddAddressInOrder`,
          type: 'post',
          headers: {
            'Authorization': 'Bearer ' + token,
          },
          data: {
            userid: this.state.userId,
            area: values.area.join(' '),
            detail: values.detail,
            name: values.name,
            phone: values.phone
          },
          success: res => {
            console.log('提交新增地址表单', res);
            if (res.code === 200) {
              this.setState({
                address: res.AddressInfo,
                visible: false
              }, () => {
                this.getAddressList();
                form.resetFields();
              })
            } else if (res.code === 201 && res.mes === '最多保存10个地址!') {
              message.warning('您已经添加了10条地址，不能再添加新地址');
            }
          }
        });
      }
    });
  }

  // 隐藏新增地址模态框
  handleCancel() {
    this.setState({
      visible: false,
    });
    this.form.resetFields()
  }

  // 显示切换地址
  showModalswitchingaddress() {
    if (!this.state.userId) {
      return message.warning('请先选择用户');
    }
    this.setState({
      switchingaddress: true,
      selectAddress: this.state.address
    });
  }

  // 获取地址列表
  getAddressList() {
    $.ajax({
      url: `${config.CrmMember}/crm_user/AddresslistInOrder`,
      type: 'get',
      headers: {
        'Authorization': 'Bearer ' + token,
      },
      data: {
        userid: this.state.userId
      },
      success: res => {
        console.log('获取地址列表', res);
        if (res.code === 200) {
          this.setState({
            addressList: res.data
          });
        }
      }
    });
  }

  // 隐藏切换地址
  handleCancelswitchingaddress() {
    this.setState({
      switchingaddress: false,
    });
  }

  // 切换收货地址
  selectAddress(address) {
    this.setState({
      selectAddress: address
    });
  }

  // 保存地址
  saveAddress() {
    this.setState({
      switchingaddress: false,
      address: this.state.selectAddress
    });
  }

  // 获取物流公司
  getShipping() {
    $.ajax({
      url: `${config.CrmOrder}/getShipping`,
      type: 'get',
      headers: {
        'Authorization': 'Bearer ' + token,
      },
      success: res => {
        console.log('获取物流公司', res);
        this.setState({
          shipping: res.data
        });
      }
    });
  }

  // 添加商品事件
  showModalAssigning() {
    this.setState({
      assigning: true
    });
    this.getCategoryList();
    this.getProductList();
  }

  // 获取分类列表
  getCategoryList() {
    $.ajax({
      url: `${config.JuseGoods}/categories_sk/GetCategoryList`,
      type: 'post',
      headers: {
        'Authorization': 'Bearer ' + token,
      },
      success: res => {
        console.log('获取分类列表', res);
        if (res.code === 200) {
          const loop = (list) => {
            list.map(item => {
              item.value = item.categoryid;
              item.label = item.categoryname;
              if (item.children.length) {
                loop(item.children);
              } else {
                delete item.children;
              }
            })
          };
          loop(res.data);
          this.setState({
            categoryList: res.data
          });
        }
      }
    });
  }

  // 获取商品列表
  getProductList() {
    const { productName: productname, productPage: pageindex, productPageSize: pagesize, currentCategoryId: categoryid } = this.state;
    $.ajax({
      url: `${config.JuseGoods}/products/GetZXproductList`,
      type: 'post',
      headers: {
        'Authorization': 'Bearer ' + token,
      },
      data: {
        productname,
        pageindex,
        pagesize,
        categoryid
      },
      success: res => {
        console.log('获取商品列表', res);
        if (res.code === 200) {
          res.data.forEach((item, index) => {
            item.key = index;
          });
          this.setState({
            productList: res.data,
            productTotal: res.datacount
          });
        }
      }
    });
  }

  // 商品列表显示
  productColumns() {
    return [{
      title: '内码',
      dataIndex: 'productnumber',
      width: '7%',
    }, {
      title: '产品名称',
      dataIndex: 'productname',
      width: '6%',
    }, {
      title: '库存',
      dataIndex: 'zx_stock',
      width: '6%',
    }, {
      title: '待发货数量',
      dataIndex: 'crmpendeliverynumber',
      width: '6%',
    }, {
      title: '单位',
      dataIndex: 'packing',
      width: '4%',
    }, {
      title: '状态',
      dataIndex: '',
      width: '6%',
      render: record => {
        let text;
        switch (record.salestatus) {
          case 0:
            text = '未发布';
            break;
          case 1:
            text = '上架区';
            break;
          case 2:
            text = '下架区';
            break;
        }
        return text;
      }
    }, {
      title: '选择',
      dataIndex: '',
      width: '5%',
      render: record => {
        for (let val of this.state.currentProductList) {
          if (val.productid == record.productid) {
            return "已选择";
          }
        }
        if (record.salestatus === 1 && record.zx_stock) {
          return <div><a href='javascript:void(0)' onClick={this.selectProduct.bind(this, record)}>确认选择</a></div>;
        }
        return <div style={{ color: '#ccc' }}>确认选择</div>;
      }
    }];
  }

  // 输入商品名称
  inputProduct(e) {
    this.setState({
      productName: e.target.value
    });
  }

  // 搜索商品
  searchProduct() {
    this.setState({
      productPage: 1
    }, () => {
      this.getProductList();
    });
  }

  // 隐藏商品列表
  handleCancelAssigning() {
    this.setState({
      assigning: false,
    });
  }

  // 确定商品列表
  handleOkAssigning() {
    this.setState({
      assigning: false,
    });
  }

  // 改变商品分页
  changeProductPage(page) {
    this.setState({
      productPage: page
    }, () => {
      this.getProductList();
    });
  }

  // 选择商品
  selectProduct(product) {
    const { currentProductList } = this.state;
    let result = true;
    currentProductList.forEach(item => {
      if (item.productid === product.productid) {
        result = false;
      }
    });
    if (result) {
      product.key = product.productid;
      product.buyNumber = 1;
      currentProductList.push(product);
      this.setState({
        currentProductList
      });
    }
  }

  // 选择商品列表显示
  currentProductColumns() {
    return [{
      title: '商品名称',
      dataIndex: 'productname',
      width: '7%',
    }, {
      title: '商品数量',
      dataIndex: '',
      width: '6%',
      render: record => {
        return <div className='rowchangecolor'><Input defaultValue={record.buyNumber} onChange={this.changeBuyNumber.bind(this, record)} /></div>;
      }
    }, {
      title: '操作',
      dataIndex: '',
      width: '4%',
      render: record => {
        return <div><a onClick={this.showModal1.bind(this, record)}>删除</a></div>;
      }
    }];
  }

  // 改变商品数量
  changeBuyNumber(record, e) {
    const { currentProductList } = this.state;
    currentProductList.forEach(item => {
      if (item.productid === record.productid) {
        e.target.value = parseInt(e.target.value) || '';
        item.buyNumber = e.target.value || 1;
      }
    });
  }

  // 删除弹出框事件
  showModal1(record) {
    this.setState({
      visible1: true,
      deleteProduct: record
    });
  }

  // 确认删除事件
  handleOk1() {
    const { deleteProduct, currentProductList } = this.state;
    currentProductList.forEach((item, index) => {
      if (item.productid === deleteProduct.productid) {
        currentProductList.splice(index, 1);
      }
    });
    this.setState({
      visible1: false,
      deleteProduct: {},
      currentProductList
    });
  }

  // 取消删除事件
  handleCancel1() {
    this.setState({
      visible1: false,
    });
  }

  // 新建订单
  handleSubmit() {
    const form = this.props.form;
    form.validateFields((err, values) => {
      if (!err) {
        console.log(values);
        const { manager, userId, address, currentProductList, expectedKuaidi100Code } = this.state;
        if (!expectedKuaidi100Code) {
          return message.error('请选择快递方式!');
        }
        if (JSON.stringify(address) === '{}') {
          return message.error('请填写收货地址!');
        }
        if (!currentProductList.length) {
          return message.error('请添加商品!');
        }
        const data = {
          id: manager.id,
          userId,
          consigneeArea: address.area,
          consigneeDetail: address.detail,
          consigneeName: address.name,
          consigneePhone: address.phone,
          orderMoney: values.orderMoney,
          expectedDeliveryDate: values.expectedDeliveryDate.format('YYYY-MM-DD HH:mm:ss'),
          depositOne: values.depositOne,
          onePayTypeId: values.onePayTypeId[values.onePayTypeId.length - 1],
          expectedKuaidi100Code,
          remark: values.remark
        };
        if (values.depositTwo && !form.getFieldError('depositTwo')) {
          if (!form.getFieldValue('twoPayTypeId')) {
            return message.error('请选择订金2支付类型!');
          }
          data.depositTwo = values.depositTwo;
          data.twoPayTypeId = values.twoPayTypeId[values.twoPayTypeId.length - 1];
        }
        data.productList = currentProductList.map(item => {
          return {
            id: item.productid,
            buyNumber: item.buyNumber
          }
        });
        $.ajax({
          url: `${config.CrmOrder}/setOrder`,
          type: 'post',
          headers: {
            'Authorization': 'Bearer ' + token,
          },
          data,
          success: res => {
            console.log('新建订单', res);
            if (res.code === 200) {
              message.success('生成订单成功', 3);
              this.setState({
                currentProductList: [],
                expectedKuaidi100Code: undefined,
                collectionMoney: ''
              });
              form.resetFields(['orderMoney', 'expectedDeliveryDate', 'depositOne', 'onePayTypeId', 'depositTwo', 'twoPayTypeId', 'remark']);
            } else if (res.code === 203) {
              message.error('无此客户操作权限!');
            } else if (res.code === 204) {
              message.error(`${res.productName}已下架!`);
            } else if (res.code === 205) {
              message.error(`${res.productName}库存不足!`);
            }
          }
        });
      }
    });
  }

  // 新增客户
  addUser() {
    this.props.changeMenu('crmAddCrmUser');
    location.hash = '/crmAddCrmUser';
  }

  // 选择分类
  selectCategory(list) {
    this.setState({
      currentCategoryId: list[list.length - 1]
    });
  }

  // 验证金额
  validatorMoney(rule, value, callback) {
    let text;
    if (value) {
      if (Number(value) !== Number(value)) {
        text = '请输入数字!';
      } else {
        const decimal = value.toString().split(".")[1];
        if (decimal && decimal.length > 2) {
          text = '请输入不超过两位的数字!';
        }
      }
    }
    if (text) {
      callback(text);
    } else {
      callback();
    }
    this.countMoney();
  }

  // 获取支付类型
  getPayType() {
    $.ajax({
      url: `${config.CrmSettings}/crm_paytype/GetPayType`,
      type: 'post',
      headers: {
        'Authorization': 'Bearer ' + token,
      },
      success: res => {
        console.log('获取支付类型', res);
        if (res.code === 200) {
          const loop = (list) => {
            list.map(item => {
              item.value = item.id;
              item.label = item.paytypename;
              if (item.children.length) {
                loop(item.children);
              } else {
                delete item.children;
              }
            })
          };
          loop(res.data);
          this.setState({
            payType: res.data
          });
        }
      }
    });
  }

  // 计算代收金额
  countMoney() {
    const { orderMoney, depositOne, depositTwo } = this.props.form.getFieldsValue(['orderMoney', 'depositOne', 'depositTwo']);
    const { orderMoney: orderMoneyError, depositOne: depositOneError, depositTwo: depositTwoError } = this.props.form.getFieldsError(['orderMoney', 'depositOne', 'depositTwo']);
    let collectionMoney = '';
    if (!orderMoneyError && !depositOneError && !depositTwoError && (orderMoney || depositOne || depositTwo)) {
      collectionMoney = (orderMoney || 0) - (depositOne || 0) - (depositTwo || 0);
      collectionMoney = parseFloat(collectionMoney.toFixed(2));
    }
    this.setState({
      collectionMoney
    });
  }

  // 选择快递方式
  selectShipping(value) {
    this.setState({
      expectedKuaidi100Code: value
    });
  }

  // 获取部门以及员工
  getDepartment() {
    $.ajax({
      url: `${config.JuseManager}/department/tree`,
      type: 'get',
      headers: {
        'Authorization': 'Bearer ' + token,
      },
      success: res => {
        console.log('获取部门以及员工', res);
        if (res.code === 200) {
          const loop = (list) => {
            list.map(item => {
              item.value = item.id;
              item.label = item.name;
              if (item.son.length) {
                item.children = item.son;
                loop(item.children);
              }
            })
          };
          loop(res.dep);
          this.setState({
            departmentList: res.dep
          });
        }
      }
    });
  }

  // 选择部门
  selectDepartment(list) {
    const id = list[list.length - 1];
    let staffList = [];
    if (id) {
      const loop = (list, id) => {
        let arr = [];
        list.forEach(item => {
          if (item.id == id) {
            arr = arr.concat(item.userlist);
            item.son.forEach(value => {
              arr = arr.concat(loop(item.son, value.id));
            });
          } else {
            arr = arr.concat(loop(item.son, id));
          }
        });
        return arr;
      }
      const { departmentList } = this.state;
      staffList = loop(departmentList, id);
    }
    staffList.forEach((item, index) => {
      item.key = index;
    });
    this.setState({
      staffList,
      currentStaff: undefined,
      currentDepartment: id
    });
  }

  // 选择员工
  selectStaff(value) {
    this.setState({
      currentStaff: value
    });
  }

  // 禁止选择的日期 
  disabledDate(current) {
    return current && current.valueOf() < Date.now() - 1000 * 60 * 60 * 24;
  }

  render() {
    const { userVisible, userPage, userPageSize, userTotal, userSizeOptions, address, user, selectAddress, shipping, productList, productPage, productPageSize, productTotal } = this.state;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 14 } };
    return (
      <div className='contentBox-adc clearfix' >
        <div className='breadcrumb'>
          <Breadcrumb separator='>'>
            <Breadcrumb.Item>直销管理</Breadcrumb.Item>
            <Breadcrumb.Item>订单管理</Breadcrumb.Item>
            <Breadcrumb.Item>新建订单</Breadcrumb.Item>
          </Breadcrumb>
        </div>
        <Form className='setOrder-form'>
          <div className='setOrder-member'>
            <h1>会员信息</h1>
            <Row>
              <Col span={6}>
                <FormItem label='客户姓名' {...formItemLayout}>
                  {getFieldDecorator('userName', {
                    rules: [{ required: true, message: '请选择客户' }],
                  })(
                    <Input onClick={this.showUser.bind(this)} readOnly placeholder="请点击选择会员" />
                    )}
                </FormItem>
              </Col>
              <Col span={6}>
                <FormItem label='账号' {...formItemLayout}>
                  <span>{user.phone}</span>
                </FormItem>
              </Col>
              <Col span={6}>
                <FormItem label='性别' {...formItemLayout}>
                  <span>{this.showSex(user.sex)}</span>
                </FormItem>
              </Col>
              <Col span={6}>
                <FormItem label='归属人' {...formItemLayout}>
                  <span>{user.ManageUserName}</span>
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={6}>
                <FormItem label='创建人' {...formItemLayout}>
                  <span>{user.CeateUserName}</span>
                </FormItem>
              </Col>
              <Col span={6}>
                <FormItem label='渠道' {...formItemLayout}>
                  <span>{user.sourcename}</span>
                </FormItem>
              </Col>
              <Col span={6}>
                <FormItem label='客户状态' {...formItemLayout}>
                  <span>{this.showUserStatus(user.customerstatus)}</span>
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={24}>
                <FormItem label='客户需求' labelCol={{ span: 2 }} wrapperCol={{ span: 22 }}>
                  <p className='yours_yos'>{user.remark}</p>
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={24}>
                <h1>
                  <i style={{ color: '#ff0000' }}>*</i>&nbsp;收货地址
                  <a className='member-button-tgd-a ' type='primary' onClick={this.showModal.bind(this)} style={{ marginLeft: 20, width: 100 }}><Icon type='plus' />新增</a>
                  <a className='member-button-tgd-a ' onClick={this.showModalswitchingaddress.bind(this)} style={{ marginLeft: 20, width: 100 }} type='primary'>切换</a>
                </h1>
              </Col>
            </Row>
            <div className='setordes-naig'>
              <Row>
                <Col span={6}>
                  <FormItem label='收货人' {...formItemLayout}>
                    <span>{address.name}</span>
                  </FormItem>
                </Col>
                <Col span={6}>
                  <FormItem label='联系方式' {...formItemLayout}>
                    <span>{address.phone}</span>
                  </FormItem>
                </Col>
                <Col span={12}>
                  <FormItem label='地址' {...formItemLayout}>
                    <span>{address.area ? address.area + ' ' + address.detail : ''}</span>
                  </FormItem>
                </Col>
              </Row>
            </div>
          </div>
          <div className='setOrder-deposit'>
            <h1>定金信息</h1>
            <Row>
              <Col span={8}>
                <FormItem label='订单金额' {...formItemLayout}>
                  {getFieldDecorator('orderMoney', {
                    rules: [{
                      required: true, message: '请输入订单金额'
                    },
                    {
                      validator: this.validatorMoney.bind(this)
                    }],
                  })(
                    <Input />
                    )}
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem label='代收货款' {...formItemLayout}>
                  <span>{this.state.collectionMoney}</span>
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem label='预计发货时间' {...formItemLayout}>
                  {getFieldDecorator('expectedDeliveryDate', {
                    rules: [{ required: true, message: '请选择预计发货时间!' }],
                  })(
                    <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" placeholder="请选择预计发货时间" disabledDate={this.disabledDate.bind(this)} />
                    )}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={8}>
                <FormItem label='订金1' {...formItemLayout}>
                  {getFieldDecorator('depositOne', {
                    rules: [{
                      required: true, message: '请输入订金'
                    }, {
                      validator: this.validatorMoney.bind(this)
                    }],
                  })(
                    <Input />
                    )}
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem label='支付方式' {...formItemLayout}>
                  {getFieldDecorator('onePayTypeId', {
                    rules: [{ required: true, message: '请选择支付类型' }]
                  })(
                    <Cascader options={this.state.payType} placeholder='请选择支付类型' changeOnSelect />
                    )}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={8}>
                <FormItem label='订金2' {...formItemLayout}>
                  {getFieldDecorator('depositTwo', {
                    rules: [{ validator: this.validatorMoney.bind(this) }],
                  })(
                    <Input />
                    )}
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem label='支付方式' {...formItemLayout}>
                  {getFieldDecorator('twoPayTypeId', {
                  })(
                    <Cascader options={this.state.payType} placeholder='请选择支付类型' changeOnSelect />
                    )}
                </FormItem>
              </Col>
            </Row>
          </div>
          <div className='setOrder-deposit-toya'>
            <a className='member-button-tgd-a ' onClick={this.showModalAssigning.bind(this)} type='primary' style={{ width: 100, float: 'left' }}>添加商品</a>
            <div className='yoot-gssf'>
              <i style={{ color: '#ff0000' }}>*</i>&nbsp;快递方式：
              <Select value={this.state.expectedKuaidi100Code} onChange={this.selectShipping.bind(this)} allowClear>
                {
                  shipping.map((item, index) => {
                    return <Option key={index} value={item.Kuaidi100Code}>{item.name}</Option>
                  })
                }
              </Select>
            </div>
          </div>
          <div className='setOrder-deposit-tooo'>
            <Table
              columns={this.currentProductColumns()}
              dataSource={this.state.currentProductList}
              pagination={false}
              bordered
            />
          </div>
          <div className='setOrder-deposit-tooo' style={{ padding: 0 }}>
            <FormItem label='备注' labelCol={{ span: 1 }} wrapperCol={{ span: 14 }}>
              {getFieldDecorator('remark', {
              })(
                <Input type='textarea' rows={4} style={{ resize: "none" }} />
                )}
            </FormItem>
          </div>
          <div className='beiggd'>
            <a href='javascript:void(0)' className='member-button-tgd-a ' style={{ width: 100, height: 40, lineHeight: '40px', float: 'right' }} type='primary' onClick={this.handleSubmit.bind(this)}>提交</a>
          </div>
        </Form>
        <Modal
          title='删除'
          visible={this.state.visible1}
          onOk={this.handleOk1.bind(this)}
          onCancel={this.handleCancel1.bind(this)}
          maskClosable={false}
        >
          <div className='delets_gg'>
            <p className='delets_gg1'>温馨提示</p>
            <p>删除后不可恢复，是否继续删除？</p>
          </div>
        </Modal>
        <NewAddressForm
          ref={this.saveFormRef.bind(this)}
          onSubmit={this.submitNewAddress.bind(this)}
          region={region}
          visible={this.state.visible}
          handleCancel={this.handleCancel.bind(this)}
        />
        <Modal title='切换地址'
          visible={this.state.switchingaddress}
          onCancel={this.handleCancelswitchingaddress.bind(this)}
          maskClosable={false}
          footer={null}
        >
          <div className='baoigg'>
            <div className='shuyut'>
              <ul>
                {
                  this.state.addressList.map((item, index) => {
                    if (item.id === (selectAddress.id || address.id)) {
                      return <li key={index} className='shuryuu' onClick={this.selectAddress.bind(this, item)}>
                        <p><span>收货人：</span>{item.name}</p>
                        <p><span>联系方式：</span>{item.phone}</p>
                        <p><span>收货地址：</span>{item.area + ' ' + item.detail}</p>
                      </li>
                    }
                    return <li key={index} onClick={this.selectAddress.bind(this, item)} >
                      <p><span>收货人：</span>{item.name}</p>
                      <p><span>联系方式：</span>{item.phone}</p>
                      <p><span>收货地址：</span>{item.area + ' ' + item.detail}</p>
                    </li>
                  })
                }
              </ul>
              <div className='youdh-ta'>
                <Button type='primary' onClick={this.saveAddress.bind(this)} style={{ marginRight: 20, width: 80, height: 30 }}>保存</Button>
                <Button onClick={this.handleCancelswitchingaddress.bind(this)} style={{ width: 80, height: 30 }}>取消</Button>
              </div>
            </div>
          </div>
        </Modal>
        <Modal title='商品列表' visible={this.state.assigning}
          onOk={this.handleOkAssigning.bind(this)}
          onCancel={this.handleCancelAssigning.bind(this)}
          maskClosable={false}
          width={'1000px'}
        >
          <div className='delets_gg'>
            <div className='addetd addetd-z'>
              <Input className='addetd-a-r' addonBefore='商品名称' placeholder='请输入' onChange={this.inputProduct.bind(this)} />
            </div>
            <div className='addetd addetd-a yryreddd-1'>
              <Cascader options={this.state.categoryList} onChange={this.selectCategory.bind(this)} placeholder='--产品分类--' changeOnSelect />
            </div>
            <Button type='primary' style={{ marginLeft: 50 }} className='member-button' style={{ width: 100, height: 40 }} icon='search' onClick={this.searchProduct.bind(this)}>搜索</Button>
          </div>
          <Table
            columns={this.productColumns()}
            dataSource={productList}
            pagination={false}
            bordered
          />
          <div className='goods-label-let clearfix' style={{ float: 'none' }}>
            <div className='floor-ppagi'>
              <p className='floor-ppagip'>当前显示 {productTotal ? 1 + (productPage - 1) * productPageSize : 0} - {productPage * productPageSize > productTotal ? productTotal : productPage * productPageSize} 条记录 共 {productTotal} 条记录</p>
              <Pagination current={productPage} total={productTotal} defaultPageSize={productPageSize} onChange={this.changeProductPage.bind(this)} />
            </div>
          </div>
        </Modal>
        <Modal
          className='setOrder-user'
          visible={userVisible}
          maskClosable={false}
          footer={null}
          title='会员列表'
          width={850}
          onCancel={this.hiddenUser.bind(this)}

        >
          <div className='setOrder-user-content'>
            <div>
              <input size="large" placeholder='请输入客户姓名、账号模糊匹配' className='setOrder-user-input' onChange={this.inputUserInfo.bind(this)} />
              <span>客户渠道</span>
              <Select size="large" className='setOrder-user-channel' onChange={this.changeCustomerSource.bind(this)} allowClear value={this.state.currentCustomerSource}>
                {
                  this.state.customerSource.map((item, index) => {
                    return <Option value={String(item.id)} key={index}>{item.sourcename}</Option>
                  })
                }
              </Select>
              <Cascader size="large" options={this.state.departmentList} placeholder='请选择部门' changeOnSelect onChange={this.selectDepartment.bind(this)} />
              <Select value={this.state.currentStaff} onChange={this.selectStaff.bind(this)} size="large" className='setOrder-user-personnel' placeholder='请选择员工' allowclear>
                {
                  this.state.staffList.map((item, index) => {
                    return <Option value={String(item.userid)} key={index}>{item.name}</Option>
                  })
                }
              </Select>
              <input type='button' className='setOrder-user-search' value='搜索' onClick={this.searchUser.bind(this)} />
            </div>
            <ul className='setOrder-user-list clearfix'>
              <li>
                <span></span>
                <span>姓名</span>
                <span>账号</span>
                <span>默认地址</span>
                <span>客户需求</span>
              </li>
              {
                this.state.userList.map((item, index) => {
                  return <li key={index}>
                    <span><input type='button' value='选择' onClick={this.selectUser.bind(this, item)} /></span>
                    <span>{item.realname}</span>
                    <span>{item.phone}</span>
                    <span>{item.addressArea ? item.addressArea.split(' ').join('') + item.addressDetail : ''}</span>
                    <span>{item.remark}</span>
                  </li>
                })
              }
            </ul>
            <Button className='setOrder-user-add' icon='plus' onClick={this.addUser.bind(this)}>新增</Button>
            <div className='setOrder-user-pagination'>
              <div>当前显示 {userTotal ? 1 + (userPage - 1) * userPageSize : 0} - {userPage * userPageSize > userTotal ? userTotal : userPage * userPageSize} 条记录 共 {userTotal} 条记录</div>
              <Pagination
                current={userPage}
                pageSize={userPageSize}
                total={userTotal}
                onChange={this.changeUserPage.bind(this)}
                showSizeChanger
                pageSizeOptions={userSizeOptions}
                onShowSizeChange={this.changeUserSize.bind(this)}
              />
            </div>
          </div>
        </Modal>
      </div >
    )
  }
}

export default Form.create()(SetOrder);
